<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>九宫格</title> 

<style>
	.container{
		width: 600px;
		height:600px;
		margin: auto;
		border:1px  solid black;
	}
	.block1{
		width:200px;
		height:200px;
		float:left;
		background-color: black;
	}
	.block2{
		width:200px;
		height:200px;
		float:left;
		background-color:white;
	}
	.block3{
		width:200px;
		height:200px;
		float:left;
		clear:left;
		background-color: black;
	}
	.block4{
		width:200px;
		height:200px;
		float:left;
		clear:left;
		background-color: white;
	}
</style>
</head>

<body>
<div class="container">
	<div class="block1"></div>
	<div class="block2"></div>
	<div class="block1"></div>
	<div class="block4"></div>
	<div class="block1"></div>
	<div class="block2"></div>
	<div class="block3"></div>
	<div class="block2"></div>
	<div class="block1"></div>
</div>
</body>

</html>